<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>产业发展</title>
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/swiper.min.css">
  <link rel="stylesheet" href="../../css/style.css">
  <style>
    body{
      /*background-color: #0c1021;*/
    }
    .swiper-container {
      width: 590px;
      height: 250px;
    }

    .item{
      margin-top: 5px;
      height: 58px;

    }
    .item .title{
      display: flex;
      align-items: center;
      margin-right: 10px;

      width: 110px;
      height: 58px;
      font-size: 16px;
      color: #f7f40a;
      font-weight: bold;
    }
    .item .unit{
      line-height: 58px;
      font-size: 12px;
      color: #ffffff;
    }
    .item .bar_title{
      width: 40px;
    }
    .item .bar_title,
    .item .finish_title{
      /*display: flex;*/
      /*align-items: center;*/
      height: 100%;
      line-height: 58px;
      font-size: 16px;
      color: #ffffff;
    }
    .item .item_bar_chart{
      margin: 0 5px;
      width: 305px;
      height: 58px;
    }
    .item .finish_chart{
      width: 58px;
      height: 58px;
    }
  </style>

</head>
<body class="">

<div class="develop_box">
  <div class="swiper-container">
    <div class="swiper-wrapper"></div>
  </div>
</div>

</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/echarts.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/swiper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
  $(function () {

    getJson('hxp_scjy_CYFZ.json', {}, function (res) {
      if (res.data && res.data.length) {
        let result = [];
        for(let i=0;i<res.data.length;i+=4){
          result.push(res.data.slice(i,i+4));
        }
        for (let i = 0; i < result.length; i++) {
          $('.swiper-wrapper').append(`<div class="swiper-slide"></div>`);
          for (let j = 0; j < result[i].length; j++) {
            let html = `<div class="item fix">
              <div class="title l">${result[i][j].typeName}<span class="unit hide">(${result[i][j].unitName})</span></div>
              <div class="bar_title l">本月:</div>
              <div class="item_bar_chart l" id="${'bar' + i + '_' + j}"></div>
              <div class="finish_title l">完成率:</div>
              <div class="finish_chart l" id="${'ring' + i + '_' + j}"></div>
            </div>`;
            $('.swiper-slide').eq(i).append(html);
            drawBar('bar' + i + '_' + j,[result[i][j].finishPlan || 0],result[i][j].qty,result[i][j].unitName);
            drawRing('ring' + i + '_' + j,[result[i][j].finishPlan || 0]);
          }
        }

        let mySwiper = new Swiper ('.swiper-container', {
          direction:'vertical',
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          },
          // loop: true, // 循环模式选项
        })
      }
    })


    /**
     * 横向柱状图
     * @param id  DOM id
     * @param data  数据 数组:[10]
     */
    function drawBar(id,data,labelData=0,unit='') {


      let newData = data.map((item)=>{
        if(Number(item) > 100){
          return 100
        }
        return Math.ceil(item) || 0
      })
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      getSymbolData = (data) => {
        let arr = [];
        for (var i = 0; i < data.length; i++) {
          arr.push({
            value: data[i]?data[i]-3:0,
            symbolPosition: 'end',
          });
        }
        return arr;
      };

      let option = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
        },
        xAxis: {
          show: false,
          type: 'value',
          boundaryGap: [0, 0],
        },
        yAxis: [
          {
            type: 'category',
            data: [''],
            axisLine: { show: false },
            axisTick: [
              {
                show: false,
              },
            ],
          },
        ],
        series: [
          {
            name: '主要柱子',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 1,
                    color: '#0e74ef',
                  },
                  {
                    offset: 0,
                    color: '#25ef99',
                  },
                ]),
              },
            },
            barWidth: 12 ,
            data: data,
            label:{
              show:true,
              formatter: function (p) {
                return labelData ? (labelData + unit) : 0
              },
              position: [0,-18],
              padding:[2,0,0,10],
              color:'#ffffff'
            }
          },
          // {
          //   name: '发光',
          //   type: 'pictorialBar',
          //   "symbol":"image://",
          //   symbolSize: [99, 40],
          //   symbolOffset: [20, 0],
          //   z: 12,
          //   zlevel: 2,
          //   itemStyle: {
          //     normal: {
          //       color: '#fff',
          //     },
          //   },
          //   data: getSymbolData(data),
          // },
          {
            name: '背景',
            type: 'bar',
            barWidth: 12,
            barGap: '-100%',
            data: [100],
            itemStyle: {
              normal: {
                color: 'rgba(160,160,160,0.59)',
                barBorderRadius: 30,
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    }

    /**
     * 环形图
     * @param id  DOM id
     * @param data  数据 10
     */
    function drawRing(id, data) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let fontColor = '#fff';
      let noramlSize = 16;

      let datas = {
        value: data,
        company: '%',
        ringColor: [
          {
            offset: 0,
            color: '#25ef99', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(14,116,239,.1)', // 100% 处的颜色
          },
        ],
      };
      let option = {
        title: [{
          text: Math.ceil(data) + '%',
          left: '45%',
          top: '26%',
          textAlign: 'center',
          textStyle: {
            fontSize: '16',
            fontFamily: 'youshebiaotihei',
            color: '#f7f40a',
            textAlign: 'center',
          },
        }],
        series: [
          {
            name: 'Line 1',
            type: 'pie',
            clockWise: false,
            radius: ['65%', '80%'],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            data: [
              {
                value: datas.value,
                name: '',
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: datas.ringColor,
                    },
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                name: '',
                value: 100 - datas.value,
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0)',
                  },
                },
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    }
  })
</script>
</html>
